<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>开单</title>
    <head th:include="include :: header"></head>
    <link type="text/css" rel="stylesheet" th:href="@{/css/style2.css}"/>
</head>
<body>
<div class="main_box new_order">
    <h2>
        <span></span>开单
    </h2>
    <form method="post">
        <div class="search_box clearfix">
            <label class="f_left">搜索会员：</label>
            <input type="search" placeholder="请输入会员卡号" id="tel" class="f_left search_input"/>
            <input id="vip" value="搜索" class="btn blue_btn" type="button"/>
        </div>
    </form>
    <div class="cont_box">
        <!--会员信息-->
        <div class="norder_box ">
            <h2>
                <span></span>会员信息
            </h2>
            <input type="hidden" id="vipId">
            <table border="0" cellspacing="0" cellpadding="0" id="vipTable">

            </table>
        </div>
        <!--添加服务-->
        <div class="norder_box">
            <h2>
                <span></span>添加服务
            </h2>
            <div class="main_box">
                <div class="cont_box editpro_box">
                    <form action="#" method="post" id="choose_form">
                        <ul class="addpro_box">
                            <li><label>理发师选择：</label>
                                <select name="barber_id" id="barber" required data-msg-required="请选择理发师">

                                    <!--这里value为服务的id-->
                                </select></li>

                            <li><label>选择服务:</label></li>
                            <div th:each="tos : ${Tos}">
                                <li><label th:text="${tos.tosName}"/>
                                    <div class="f_left choose_span choose_radio" th:id="${tos.tosId}">
                                        <span th:each="ctos:${tos.children}" th:id="${ctos.serviceId}"
                                              th:text="${ctos.serviceName}"></span>

                                    </div>
                                </li>
                            </div>

                        </ul>
                        <h2><span></span>订单备注(此内容会在小票展示)</h2>
                        <textarea id="remark" placeholder="请输入订单备注"></textarea>
                        <br><br>
                    </form>
                    <div class="clearfix">
                        <input type="button" value="确认选择" id="confirm" class="btn blue_btn"/>
                    </div>
                </div>
            </div>


            <!--开单所选服务-->
            <div class="spend_info">
                <ul>
                    <form action="#" method="post" id="addOrder">
                    </form>
                </ul>

                <div class="total">
                    本次共计<em class="totalpic"></em>,
                    会员卡优惠后<em class="totalupic"></em>

                </div>
            </div>
        </div>



        <div class="clearfix" style="margin-top: 20px;">
            <input type="submit" value="挂账" class="btn blue_btn total_btn">
        </div>
    </div>
</div>
<!--javascript include-->
<div th:include="include :: footer"></div>
<script th:src="@{/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/js/jquery.validate.min.js}"></script>
<script th:src="@{/js/other.js}"></script>
<script>

    //表单默认无法提交
    var flag = false;
    $(function () {
        $(".choose_radio span").click(function () {
            if ($(this).hasClass("curr")) {
                $(this).removeClass("curr");
            } else {
                $(this).addClass("curr").siblings().removeClass("curr");
            }
            //如果已经确认选择然后又改了，则需要重新确认选择
            console.log(flag);
            if(flag == true)
                flag=false;
            $(this).parent().next().val($(this).parent().find(".curr").text());
        });
        $(".choose_check span").click(function () {
            if ($(this).hasClass("curr")) {
                $(this).removeClass("curr");
            } else {
                $(this).addClass("curr");
            }

            $(this).parent().next().val($(this).parent().find(".curr").text());
        });
        $("#choose_form").validate({
            ignore: [],
            errorElement: "div"
        });

        //查询会员获取信息
        $("#vip").click(function () {
            //如果之前已经确认选择了，则要重新确认选择
            if(flag==true){
                flag = false;
            }
            var tel = $('#tel').val();
            if (tel == '') {
                $.modal.alertWarning("不能为空！");
                return;
            }
            $.ajax({
                type: "post",
                url: "/saleOrderItem/searchVip",
                traditional: true,
                async: true,
                data: {"tel": tel},
                success: function (data) {
                    if (data.length != 0) {
                        var html = '';
                        html += '<tbody><tr><td>会员姓名</td><td>' + data.vipName + '</td>';
                        html += '<td>会员手机号</td><td>' + data.vipTel + '</td>';
                        html += '<td>会员等级</td><td>' + data.tovip.tovipName + '</td>';
                        html += '<td>享受折扣</td><td>' + data.tovip.tovipDisc + '</td>'
                        html += '<td>办卡时间</td><td>' + data.vipMfg + '</td>';
                        html += '<td>到期时间</td><td>' + data.vipExp + '</td></tr></tbody>';
                        if(data.vipState==1)
                            html += '<td>会员状态</td><td>有效</td></tr></tbody>';
                        else
                            html += '<td>会员状态</td><td><font size="5" color="red">已过期</font></td></tr></tbody>';

                        $("#vipTable").html(html);
                        $("#vipId").val(data.vipId);
                        $(".user_have").show();

                    } else {
                        var html = '<center><font size="5px" color="red">未查到结果</font></center>';
                        $("#vipTable").html(html);

                    }
                }

            })
        });
        //根据理发师姓名选择理发师
        barberName();
        function barberName() {
            $.ajax({
                type: "post",
                url: "/order/selectBname",
                dataType: "json",
                success: function (res) {
                    if (null != res) {
                        var html = '<option value="">请选择</option>';
                        Object.keys(res).forEach(function (key) {
                            html += '<option value="' + res[key].uid + '" class="choice">' + res[key].name + '</option>';
                        });
                        $('#barber').html(html);
                    }
                }
            });
        }
        //确认选择
        $("#confirm").click(function () {
            var servicesIds = new Array();
            var vipId, receivable, total, barberId, bname2, remark;
            vipId = $("#vipId").val();
            remark = $("#remark").val();
            barberId = $("#barber option:selected").val();
            if (barberId == '' && barberId == 0) {
                $.modal.alertError("你还未选择理发师");
                return ;
            }
            $(".choose_radio span").each(function (i) {
                if ($(this).hasClass('curr')) {
                    var a = $(this).attr("id");
                    servicesIds.push(a);

                }
            });
            if (servicesIds.length == 0) {
                $.modal.alertError("你还未选择服务");
                return;
            }
            $.ajax({
                type: "post",
                url: "/saleOrderItem/calculatePrice",
                traditional: true,
                async: true,
                data: {"servicesIds": servicesIds, "vipId": vipId},
                success: function (data) {
                    console.log(data[1]);

                    $(".total").find(".totalpic").text(data[0] + "元");
                    $(".total").find(".totalupic").text(data[1] + "元");
                    total = parseFloat($(".totalupic").text());
                    receivable = parseFloat($(".totalpic").text());
                    bname2 = $("#barber option:selected").text();
                    var html = '<div class="addpro_box clearfix">请核对订单信息:</div>';
                    html += '<div class="addpro_box clearfix"><label>会员卡号：</label><input name="vipId" value="' + vipId + '" readonly="readonly"/></div>';
                    html += '<div class="addpro_box clearfix"><label>理发师姓名：</label><input   value="' + bname2 + '" readonly="readonly"/></div>'
                    html += '<input type="hidden" name="barberId" value="' + barberId + '"readonly="readonly"/>';
                    html += '<input type="hidden" name="total" value="' + total + '"readonly="readonly"/>';
                    html += '<input type="hidden" name="receivable" value="' + receivable + '"readonly="readonly"/>';
                    html += '<input type="hidden" name="remark" value="' + remark + '" readonly="readonly"/>';
                    for (var i = 0; i < servicesIds.length; i++)
                        html += '<input type="hidden" name="serviceId" value="' + servicesIds[i] + '"readonly="readonly"/>';
                    $("#addOrder").html(html);
                    $(".spend_info").show();
                    //将表单设置为可提交。
                    flag = true;
                }
            })
        });


        //最终结算
        $(".total_btn").click(function () {

            if (flag) {
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/saleOrderItem/addOrder",//url
                    data: $('#addOrder').serialize(),
                    beforeSend: function () {
                        $.modal.loading("正在处理中，请稍后...");
                        $.modal.disable();
                    },
                    success: function (result) {
                        $.modal.closeLoading();

                        layer.confirm("开单成功，请在订单管理中查看", {
                            icon: 1,
                            title: "系统提示",
                            btn: ['确认'],
                            btnclass: ['btn btn-primary'],
                        }, function () {
                            location.reload(true);
                        });

                    },
                    error: function (error) {
                        $.modal.closeLoading();
                        $.modal.alertError("开单失败，请重试！");

                    }
                });
            }
            else
                $.modal.alertWarning("信息已修改或未确认选择，请确认选择！");
        });
    });
</script>
</body>
</html>
